<template>
  <ul width="400px" default-active="1-4-1" class="teacher-menu el-menu-vertical">
    <router-link v-for="(item, index) in this.menuList" :key="item.name" tag="div" :to="item.path">
      <li class="menu-item" :ref="item.name" :index="index.toString()">
        <div class="menu-item-container">
          <i :class="[item.icon,'item-icon']"></i>
          {{item.title}}
          <el-badge v-show="item.tip" :value="item.tip" class="tip"></el-badge>
        </div>
        <svg class="next" aria-hidden="true">
          <use xlink:href="#iconjiantouarrow487" />
        </svg>
      </li>
    </router-link>
  </ul>
</template>

<script>
import { Badge } from "element-ui";
export default {
  components: {
    ElBadge: Badge
  },
  data() {
    return {
      path: this.$router.currentRoute.path.split("/")[2],
      menuList: [
        {
          path: "/teacher_center_s/info",
          title: "个人信息",
          name: "info",
          icon: "el-icon-user"
        },
        // {
        //   path: "/teacher_center_s/release",
        //   title: "发布课程",
        //   name: "release",
        //   icon: "el-icon-upload"
        // },
        // {
        //   path: "/teacher_center_s/management",
        //   title: "管理课程",
        //   name: "management",
        //   icon: "el-icon-menu"
        // },
        {
          path: "/teacher_center_s/income",
          title: "我的收入",
          name: "income",
          tip: 12,
          icon: "el-icon-sell"
        },
        {
          path: "/teacher_center_s/questions",
          title: "留言问答",
          name: "questions",
          tip: 11,
          icon: "el-icon-chat-dot-round"
        },
        {
          path: "/teacher_center_s/message",
          title: "我的消息",
          name: "message",
          tip: 11,
          icon: "el-icon-message"
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.el-menu {
  background: none !important;
}
.teacher-menu {
  border-radius: 5px;
  overflow: scroll;
  border: none;
  box-sizing: border-box;
  height: 100%;
  .menu-item {
    box-sizing: border-box;
    padding: 10px 30px;
    position: relative;
    width: 100%;
    font-size: 15px;
    height: 60px;
    display: flex;
    align-items: center;
    &-container {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .item-icon {
        font-size: 20px;
        margin-right: 20px;
      }
      .tip{
        margin-left: 20px;
      }
    }
    .next {
      position: absolute;
      top: 50%;
      margin-top: -10px;
      width: 20px;
      height: 20px;
      right: 5%;
    }
  }
}
</style>
